<template>
  <div v-if="datas && datas.length">
    <div v-for="item in datas" :key="item.id" class="aside-submenu">
      <div class="aside-submenu-title" :class="{active: obj.id === item.id}" @click="handleClick(item)">
        <i v-if="item.icon" class="iconfont" :class="item.icon"></i>
        {{item.label}}
      </div>
      <submenu v-if="isActive.indexOf(item.id) !== -1" :datas="item.children" :allPath="allPath" :isActive="isActive" @activeChange="activeChange"></submenu>
    </div>
  </div>
  <div v-else class="empty-list">
    <slot/>
  </div>
</template>

<script>
export default {
  components: {
    submenu: () => import('./submenu.vue')
  },
  computed: {
    obj () {
      return this.$store.state.obj
    }
  },
  props: {
    datas:{
      type: Array,
      default: ()=> {
        return []
      }
    },
    isActive:{
      type: Array,
      default: ()=> {
        return []
      }
    },
    allPath:{
      type: Object,
      default: ()=> {
        return {}
      }
    },
  },
  methods: {
    handleClick(item) {
      if (this.isActive.toString().indexOf(this.allPath[item.id].toString()) !== -1) {
        let active = [...this.allPath[item.id]]
        active.pop()
        // props属性不支持编辑，暴露事件给父组件获取后存储
        this.$emit('activeChange', active)
      } else {
        this.$emit('activeChange', [...this.allPath[item.id]])
      }
      // 后面处理点击事件的存储对象
      this.$store.commit('setObj', item)
      if (this.$route.path !== ('/' + this.allPath[item.id][1])) {
        this.$router.push('/' + this.allPath[item.id][1])
      }
    },
    activeChange (active) {
      this.$emit('activeChange', active)
    }
  }
}
</script>

<style lang="less" scoped>
.empty-list {
  color: #ccc;
  font-size: 12px;
}
</style>
